<template>
 <div class="layout-container">
    <div class="left">
        <router-link class="link" to="/home">首页</router-link>
        <router-link class="link" to="/news">新闻</router-link>
        <router-link class="link" to="/user">用户</router-link>
        <router-link class="link" to="/brand">品牌管理</router-link>
        <router-link class="link" to="/brand2">品牌管理2</router-link>
    </div>
    <div class="right">
        <div class="header">
            <div class="quit" @click="quit">退出</div>
        </div>
        <div class="content">
            <!-- 二级路由占位符 -->
            <router-view></router-view>
        </div>
    </div>
 </div>
</template>

<script>
export default {
    data(){
         return{}
    },
    created(){},
    methods:{
        quit(){
            // 清除本地存储
            localStorage.removeItem('arr')
            // 跳转到登录
            this.$router.push('/login')
        }
    },
    components:{}
}

</script>
<style scoped>
.layout-container {
    display: flex;
}
.left {
    width: 230px;
    height: 100vh;
    background-color: #333;
}
.right {
    width: calc(100% - 230px);
    height: 100vh;
    background-color: #aaa;
}
.header {
    width: 100%;
    height: 60px;
    background-color: #fff;
}
.content {
    margin: 20px;
    background-color: #fff;
    height: 500px;
    border-radius: 10px;
    padding: 10px;
}
.link {
    text-decoration: none;
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 20px;
}
.active {
    background-color: pink;
}
.quit {
    float: right;
    height: 40px;
    width: 80px;
    line-height: 40px;
    text-align: center;
    border-radius: 10px;
    background-color: blue;
    color: #fff;
    margin-top: 10px;
    margin-right: 10px;
    cursor: pointer;
}
</style>